<template>
  <el-form style="margin-top: 5px;"
    ref="attachmentRuleFormRef"
    class="rk-compact-form"
    :model="form"
    :rules="formRules"
    label-width="120px">
    <el-row class="mb20">
      <el-col :span="12">
        <el-form-item label="业务类型"
          prop="busiType">
          <el-input v-model="form.busiType"
            placeholder="请输入业务类型" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业务子类型"
          prop="busiProperty">
          <el-input v-model="form.busiProperty"
            placeholder="请输入业务子类型" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col :span="12">
        <el-form-item label="是否必传"
          prop="nullable">
          <rk-select v-model="form.nullable"
            style="width: 100%;"
            :isSearch="false"
            placeholder="请选择是否必传"
            enum="REQUIRED_UPLOAD_STATUS">
          </rk-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="附件顺序"
          prop="fileOrder">
          <el-input-number style="width: 100%"
            v-model="form.fileOrder"
            placeholder="请填写附件顺序"
            :min="1"
            :max="100"
            :precision="0" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col :span="24">
        <el-form-item label="业务规则描述"
          prop="busiPropertyDesc"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }">
          <el-input v-model="form.busiPropertyDesc"
            placeholder="业务规则描述" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col :span="24">
        <el-form-item label="附件详细信息"
          prop="fileDesc"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }">
          <el-input v-model="form.fileDesc"
            placeholder="附件详细信息" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col :span="8">
        <el-form-item label="附件类型"
          prop="is_limitType"
          :label-col="{ span: 9 }"
          :wrapper-col="{ span: 15 }">
          <rk-select v-model="form.is_limitType"
            :isSearch="false"
            placeholder="请选择附件类型"
            enum="LIMIT_STATUS">
          </rk-select>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="附件文件格式"
          prop="fileSuffix"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 19 }">
          <el-input v-model="form.fileSuffix"
            placeholder="请填写附件文件格式" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col :span="8">
        <el-form-item label="附件大小"
          prop="is_limitSize"
          :label-col="{ span: 9 }"
          :wrapper-col="{ span: 15 }">
          <rk-select v-model="form.is_limitSize"
            :isSearch="false"
            placeholder="请选择附件大小"
            enum="LIMIT_STATUS">
          </rk-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="最小值(KB)"
          prop="minLimit"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }">
          <el-input v-model="form.minLimit"
            placeholder="请填写最小值" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="最大值(KB)"
          prop="maxLimit"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }">
          <el-input v-model="form.maxLimit"
            placeholder="请填写最大值" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col :span="24">
        <el-form-item label="备注"
          prop="comments"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }">
          <el-input v-model="form.comments"
            placeholder="备注" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import XEUtils from 'xe-utils'

/** 默认表单数据 */
let attachmentRuleForm = reactive({
  ruleId: undefined,
  busiType: undefined,
  busiProperty: undefined,
  nullable: 'Y',
  fileOrder: 1,
  busiPropertyDesc: undefined,
  fileDesc: undefined,
  fileSuffix: undefined,
  is_limitType: 1,
  is_limitSize: 1,
  minLimit: 1,
  maxLimit: 20480,
  comments: undefined
})
const props = defineProps({
  // 回显的表单数据
  ruleModel: {
    type: Object, default: () => { }
  },
  model: {
    type: String,
    default: ''
  },
})
const attachmentRuleFormRef = ref('')
const form = ref(XEUtils.clone(attachmentRuleForm, true))
/** 修改表单数据回显 */
const loadForm = async () => {
  const echoForm = props.ruleModel
  let newFormData = {}
  for (let key in attachmentRuleForm) {
    const newKey = (XEUtils.isNull(echoForm[key]) || XEUtils.isUndefined(echoForm[key])) ? attachmentRuleForm[key] : echoForm[key]
    newFormData[key] = XEUtils.clone(newKey, true)
  }
  form.value = {
    ...newFormData
  }
}

const formRules = reactive({
  busiType: [{ required: true, message: '请输入业务类型', trigger: 'blur' }],
  fileOrder: [{ required: true, message: '请输入附件顺序', trigger: 'blur' }],
  busiPropertyDesc: [{ required: true, message: '请输入业务规则描述', trigger: 'blur' }]
})

/** 表单校验 */
const validateForm = async () => {
  let resValid = false
  await attachmentRuleFormRef.value.validate((valid, failCol) => {
    resValid = valid
  })
  return resValid
}

/** 重置表单 */
const resetForm = () => {
  attachmentRuleFormRef.value.resetFields()
  attachmentRuleFormRef.value.clearValidate()
  // 重新赋值
  form.value = XEUtils.clone(attachmentRuleForm, true)
}
/** 请求获取信息 */
const getFormData = () => {
  const { ruleId } = props.ruleModel
  attachmentRuleForm.ruleId = ruleId
  let resultData = {}
  for (let key in form.value) {
    resultData[key] = Reflect.ownKeys(attachmentRuleForm).includes(key) ? form.value[key] : ''
  }
  return resultData
}

defineExpose({
  validateForm,
  resetForm,
  loadForm,
  getFormData
})
</script>

<style lang="less" scoped>
</style>